<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        body {
            background-color: lightskyblue;
        }

        form {
            background-color: white;
            width: 400px;
            height: 160px;
            margin: 0 auto;
            margin-top: 200px;
            text-align: center;
            padding-top: 40px;
            border-radius: 20px;
            box-shadow: 10px 10px 5px gray;
        }

        button {
            width: 180px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form>
            账户：<input type="text" v-model="user.account"><br><br>
            密码：<input type="password" v-model="user.pass"><br><br>
            <button @click.prevent="login">登录</button>
        </form>
    </div>1


    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: "Hello Vue",
                    user: {
                        account: "",
                        pass: ""
                    }
                }
            },
            methods: {
                login() {
                    console.log(this.user);//用户点击登录时，能获取用户输入的数据
                    //将数据发送到后台，做查询操作axios
                    axios.get('http://127.0.0.1:8888/users',{params:this.user})
                        .then(function (response) {
                            if(response.data.length > 0){
                                window.location.href = "index.html"
                            }else{
                                alert("login FAILUER")
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                }
            },
        }).mount("#app")
    </script>
</body>

</html>